<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>css的超链接导航条的案例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
   <style type="text/css">
           .box{
            background-color:pink;
			 	 height:50px;
			 	 text-align: center;
           }
           a{
			 	 color: black;
			 	 text-decoration:none;
			 	 width:100px;
			 	 height:50px;
                /* 因为a标签是行内元素，所以宽高度不起作用，
                还有就是转换成为行内块元素 */
			 	 display: inline-block;
             }
             
             a.one{
			 	 color: red;
			 }

			 a:hover{
                 /* 设置文本的下划线 */
			 	 text-decoration: underline;
			 	 color: yellowgreen;
			 	 background-color: #F2B718;
			 }

          

   
   </style>

</head>
<body>
    <div class="box">
            <a href="#" class="one" title="天猫">天猫</a>
            <a href="#" class="one">聚划算</a>
            <a href="#" class="one">超市</a>
            <a href="#" class="one">头条</a>
            <a href="#">阿里旅行</a>
            <a href="#">电器城</a>
            <a href="#">阿斯蒂</a>
            <a href="#">阿斯</a>
            <a href="#">么么哒</a>

    </div>
</body>
</html>